<template>
	<view class="two">
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num"  :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="BH5"></view>
		<view class="padding-sm">
			<view class="cu-form-group area">
				<view class="click" @tap="btnClick"></view>
				<view class="title"><span>*</span>所在地区</view>
				<input type="text" :value="data.address_city"  placeholder="选择地区" disabled />
			</view>

			<view class="cu-form-group align-start">
				<view class="title"><span>*</span>详细地址</view>
				<!-- 1.1.5升级 -->
				<textarea 
				maxlength="-1" 
				@input="getInputtips"
				@focus="focusInputtips" 
				@confirm="confirmInputtips" 
				@blur="blurInputtips"
				:placeholder-style="adcode==''?'color: #bbb':''" 
				:adjust-position="false" 
				v-model="data.address_detail"
				:disabled="adcode==''?true:false" 
				:placeholder="adcode==''?'还没有选择地区哦~ 选择地区后完成此项':'支持智能联想，输入小区名试试~'"/>
			</view>

			<scroll-view scroll-y="true" class="tipsScroll" v-show="!addressType">
				<view class="item" v-for="(item,index) in addressList.tips" :key="index" @tap="addressTisp(item)">
					<view>{{item.address}}</view>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<!-- 1.0.5升级 -->
			<!-- 1.0.6升级 -->
			<view class="padding-bj flex flex-direction margin-top" v-show="addressType">
				<button v-if="loading"  style="background-color: #64AA58;height: 90rpx;line-height: 90rpx;color: white;" class="iconfont iconsaomiao">提交中...</button>
				<button v-else @tap="next" class="cu-btn wanl-bg-orange lg">提交审核</button>
			</view>
			<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuan:1,
				numList: [{
					name: '提交资质'
				}, {
					name: '位置信息'
				}, {
					name: '等待审核'
				},  ],
				num: 1,
				data:{
					province:'',
					city:'',
					district:'',
					town:'',
					address_city:'',
					address_detail:'',
					lat:'',
					lon:'',
					type:1
				},
				adcode:'',
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				addressType: true
			};
		},
		onLoad(option) {
			if('type' in option){
				this.data.type = option.type;
			}
			this.getStore();			
		},
		methods:{
			async getStore(){
				await uni.request({
					url: '/wanlshop/ddp/getStore?type='+this.data.type,
					method: 'get',
					success: res => {
						console.log(res);
						if(res.data.data){
							this.data = res.data.data;
						}
					}
				});
				
			},
			next(){
				if (this.data.address_detail == '') {
					this.$wanlshop.msg('请填写必填项');
					return false;
				}
		
				this.loading = true;
				this.data.verify = 2;
				uni.request({					
					url: '/wanlshop/ddp/storeApply',
					data: this.data,
					method:'POST',
					success: res => {
						this.loading = false;
						uni.navigateTo({
						  url: '/pages/shop/apply/three/three',
						});
						return true;						
					},
					error:res => {
						return false;
					}
				});
					
				
			},
			btnClick() {
				console.log('sss');
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				console.log(address);
				this.data.province = address.province;
				this.data.city = address.city;	
				this.data.district = address.district;
				
				this.data.address_city = address.formatted_address;		
				
				this.adcode = address.adcode;
			},
			//调用高德地图搜索相关地址
			getInputtips(event) {
				let keywords = event.detail.value;
				if (keywords) {
					uni.request({
						url: 'https://restapi.amap.com/v3/assistant/inputtips',
						data: {
							key: this.$wanlshop.config('amapkey'),
							keywords: keywords,
							location: this.addressList.location,
							city: this.addressList.adcode
						},
						success: (res) => {
							let addressList = [];
							// 1.1.8升级
							if(res.data.infocode == 10001){
								this.$wanlshop.msg('获取位置失败：错误' + res.res.info);
							}else{
								res.data.tips.forEach(item => {
									if (item.address.length == 0) {
										item.address = '暂未收录地址';
										item.location = '113.294701,22.666562';
									}
									addressList.push(item);
								});
							}
							this.addressList.tips = addressList;
						}
					});
				}
			},
			// 详细地址失去焦点
			blurInputtips(event) {
				this.data.address_detail = event.detail.value;
				setTimeout(() => {
					this.addressType = true;
				}, 10);
			},
			// 详细地址已完成
			confirmInputtips(event) {
				this.addressType = true;
			},
			// 详细地址获取焦点
			focusInputtips(event) {
				this.addressType = false;
			},
			// 详细地址替换
			addressTisp(data) {
				console.log(data);
				if(data.location){
					let lonlat = data.location.split(',');
					this.data.lon = lonlat['0'];
					this.data.lat = lonlat['1'];
				}
			
				this.adcode = data.adcode;				
				// 1.0.5升级				
				if(data.name){
					this.data.address_detail = data.name;
				}								
				this.addressType = true;
			},
		}
	}
</script>

<style lang="scss">
.two{
	.BH5{background-color: #F3F5F4;height: 4px;}
	.price{display: flex;padding: 20px 10px;justify-content: space-between;
		.price-01{border: 2px solid #F8F8F8;border-radius: 3px;width: 32%;text-align: center;padding: 20px 0;font-weight: 600;
		font-size: 16px;
			.price-01-p{padding: 18px 0 13px;color: #FF5300;
				span{font-size: 20px;padding-left: 5px;}
			}
			text{color: #B0B1B5;font-size: 14px;font-weight: 500;}
		}
		.xz{border: 2px solid #FF5300;}
	}
	.H50{height: 50px;}
	.btn{position: fixed;bottom: 0; left:0;padding: 10px;width: 100%;background-color: #fff;z-index: 9;}
	.cu-form-group.area .click{
		position: absolute;
		z-index: 99;
		right: 0;
		left: 0;
		height: 80rpx;
	}
	.tipsScroll .item {
		margin: 25rpx 0;
	}
	
	.tipsScroll .item view {
		color: #B8B8B8;
		font-size: 22rpx;
	}
	
	.tipsScroll .item text {
		color: #333;
	}
}
</style>
